<template>
  <div
    v-for="item in visitedRoutes"
    v-show="item.path == routerKey"
    :key="item.path"
    :class="[item.path == routerKey ? 'view-show' : '', hasPda ? 'h-full' : '']"
  >
    <!-- <component :is="item.components" v-if="item.components != ''" :menu-id="item.meta.menuId" /> -->
    <component :is="item.components" v-if="item.components != '' && !item.initNotActive" :menu-id="item.meta.menuId" />
  </div>

  <!-- <transition mode="out-in"></transition> -->
  <!-- <router-view v-slot="{ Component }">
    <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
      <component :is="Component" :key="routerKey" class="view-show" />
    </keep-alive>
  </router-view> -->
</template>

<script>
  import { provide, watch, computed, defineComponent, getCurrentInstance, nextTick, onBeforeMount, onUnmounted, ref } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import { keepAliveMaxNum } from '@project/config'
  import VuiProgress from 'nprogress'
  import { handleActivePath } from '@/utils/routes'
  import Preview from '@/components/preview.vue'
  import HomePc from '@/components/home_pc.vue'
  import components from '@/project/dams/views/view'
  export default defineComponent({
    name: 'VuiRouterView',
    components: { ...components, Preview, HomePc },
    setup() {
      const store = useStore()
      const route = useRoute()
      const setNowMenuCode = (_route) => store.dispatch('tmp/setNowMenuCode', _route)

      const theme = computed(() => store.getters['settings/theme'])
      const visitedRoutes = computed(() => store.getters['tabs/visitedRoutes'])

      const { proxy } = getCurrentInstance()

      const routerKey = ref()
      const keepAliveNameList = ref()

      const updateKeepAliveNameList = (refreshRouteName = null) => {
        keepAliveNameList.value = [
          ...new Set(visitedRoutes.value.filter((item) => !item.meta.noKeepAlive && item.name !== refreshRouteName).flatMap((item) => item.matched)),
        ]
      }
      const _pageInfo = ref({})
      const getPaths = computed(() => store.getters['preview/getPaths'])
      const updatePageId = () => {
        let _item = visitedRoutes.value.find((item) => item.path == routerKey.value)
        if (_item && _item.name != 'dashboard' && getPaths.value[_item.path]) {
          store.dispatch('preview/setNowPageId', getPaths.value[_item.path])
        }

        _pageInfo.value = _item
      }
      provide('ActivePageInfo', () => {
        return _pageInfo
      })
      // 更新KeepAlive缓存页面
      watch(
        () => route.fullPath,
        () => {
          routerKey.value = handleActivePath(route, true)

          updatePageId() // 更新pageid
          setNowMenuCode(route)
          updateKeepAliveNameList()
        },
        {
          immediate: true,
        }
      )

      onBeforeMount(() => {
        // updateKeepAliveNameList()
        proxy.$sub('reload-router-view', () => {
          if (theme.value.showProgressBar) VuiProgress.start()
          const cacheActivePath = routerKey.value

          updateKeepAliveNameList(route.name)
          // routerKey.value = null
          nextTick(() => {
            routerKey.value = cacheActivePath
            updateKeepAliveNameList()
          })
          setTimeout(() => {
            if (theme.value.showProgressBar) VuiProgress.done()
          }, 200)
        })
      })

      onUnmounted(() => {
        proxy.$unsub('reload-router-view')
      })
      let hasPda = process.env.VUE_APP_BuildProject === 'pda'

      return {
        theme,
        routerKey,
        keepAliveMaxNum,
        keepAliveNameList,
        visitedRoutes,
        hasPda,
      }
    },
  })
</script>
